<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预制菜数据分析</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            margin: 0;
            padding: 20px;
            background: #f0f2f5;
        }

        .dashboard {
            max-width: 1400px;
            margin: 0 auto;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
        }

        .header h1 {
            color: #1a365d;
            font-size: 2.2em;
            margin-bottom: 10px;
        }

        .charts-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-bottom: 20px;
        }

        .chart-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        }

        .chart-title {
            font-size: 1.2em;
            color: #2d3748;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e2e8f0;
        }

        .chart {
            height: 400px;
            width: 100%;
        }

        @media (max-width: 1024px) {
            .charts-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="dashboard">
        <div class="header">
            <h1>预制菜数据分析面板</h1>
        </div>

        <div class="charts-container">
            <div class="chart-card">
                <div class="chart-title">产品类型分布</div>
                <div id="productChart" class="chart"></div>
            </div>
            
            <div class="chart-card">
                <div class="chart-title">运输温度监控</div>
                <div id="temperatureChart" class="chart"></div>
            </div>

            <div class="chart-card">
                <div class="chart-title">原材料来源分析</div>
                <div id="materialChart" class="chart"></div>
            </div>

            <div class="chart-card">
                <div class="chart-title">运输距离统计</div>
                <div id="distanceChart" class="chart"></div>
            </div>

            <div class="chart-card">
                <div class="chart-title">产品验证记录统计</div>
                <div id="verificationChart" class="chart"></div>
            </div>

            <div class="chart-card">
                <div class="chart-title">合约状态分布</div>
                <div id="contractChart" class="chart"></div>
            </div>
        </div>
    </div>

    <script>
        // 配置图表主题色
        const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272'];
        
        // 初始化所有图表
        const charts = {
            productChart: null,
            temperatureChart: null,
            materialChart: null,
            distanceChart: null,
            verificationChart: null,
            contractChart: null
        };
        
        // 产品分布图表
        charts.productChart = echarts.init(document.getElementById('productChart'));
        
        // 温度监控图表
        charts.temperatureChart = echarts.init(document.getElementById('temperatureChart'));
        
        // 原材料来源图表
        charts.materialChart = echarts.init(document.getElementById('materialChart'));
        
        // 运输距离图表
        charts.distanceChart = echarts.init(document.getElementById('distanceChart'));
        
        // 验证记录图表
        charts.verificationChart = echarts.init(document.getElementById('verificationChart'));
        
        // 合约状态图表
        charts.contractChart = echarts.init(document.getElementById('contractChart'));

        function updateCharts() {
            fetch('/api/visualization_data')
                .then(response => response.json())
                .then(data => {
                    // 产品分布图表
                    charts.productChart.setOption({
                        color: colors,
                        title: {
                            text: '产品类型分布',
                            left: 'center',
                            textStyle: {
                                fontSize: 16
                            }
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            top: 'middle'
                        },
                        series: [{
                            name: '产品数量',
                            type: 'pie',
                            radius: ['45%', '70%'],
                            center: ['60%', '50%'],
                            avoidLabelOverlap: true,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: true,
                                position: 'outside',
                                formatter: '{b}: {c}个'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '18',
                                    fontWeight: 'bold'
                                }
                            },
                            data: data.productDistribution
                        }]
                    });

                    // 温度监控图表
                    charts.temperatureChart.setOption({
                        title: {
                            text: '运输温度变化',
                            left: 'center',
                            textStyle: {
                                fontSize: 16
                            }
                        },
                        tooltip: {
                            trigger: 'axis',
                            formatter: function(params) {
                                const index = params[0].dataIndex;
                                return `时间：${data.temperatureData.times[index]}<br/>
                                       温度：${params[0].value}°C<br/>
                                       车辆：${data.temperatureData.vehicles[index]}<br/>
                                       路线：${data.temperatureData.routes[index]}`;
                            }
                        },
                        grid: {
                            top: '15%',
                            left: '3%',
                            right: '4%',
                            bottom: '15%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: data.temperatureData.times,
                            axisLabel: {
                                rotate: 45,
                                interval: 'auto'
                            }
                        },
                        yAxis: {
                            type: 'value',
                            name: '温度 (°C)',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed'
                                }
                            }
                        },
                        visualMap: {
                            show: false,
                            pieces: [{
                                gt: 4,
                                lte: 30,
                                color: '#ff6666'
                            }, {
                                gt: -18,
                                lte: 4,
                                color: '#5470c6'
                            }]
                        },
                        series: [{
                            name: '温度',
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            symbolSize: 8,
                            data: data.temperatureData.values,
                            markArea: {
                                itemStyle: {
                                    color: 'rgba(255, 173, 177, 0.2)'
                                },
                                data: [
                                    [{
                                        yAxis: 4,
                                        label: {
                                            show: true,
                                            position: 'insideTop',
                                            formatter: '温度过高区域'
                                        }
                                    }, {
                                        yAxis: 30
                                    }],
                                    [{
                                        yAxis: -18,
                                        label: {
                                            show: true,
                                            position: 'insideBottom',
                                            formatter: '正常温度区域'
                                        }
                                    }, {
                                        yAxis: 4
                                    }]
                                ]
                            },
                            lineStyle: {
                                width: 3
                            },
                            areaStyle: {
                                opacity: 0.2
                            },
                            emphasis: {
                                focus: 'series',
                                itemStyle: {
                                    borderWidth: 3
                                }
                            }
                        }]
                    });

                    // 简化原材料来源图表的配置
                    charts.materialChart.setOption({
                        title: {
                            text: '原材料来源分析',
                            left: 'center',
                            top: 10
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: function(params) {
                                if (!params.data.value) {
                                    return `供应商：${params.name}`;
                                }
                                return `${params.name}<br/>使用次数：${params.data.value}次`;
                            }
                        },
                        series: [{
                            type: 'sunburst',
                            data: data.materialSources,
                            radius: ['25%', '85%'],
                            center: ['50%', '50%'],
                            sort: null,
                            levels: [
                                {   // 供应商层
                                    r0: '25%',
                                    r: '50%',
                                    itemStyle: {
                                        borderWidth: 2,
                                        borderColor: '#fff'
                                    },
                                    label: {
                                        fontSize: 14,
                                        color: '#333',
                                        rotate: 'tangential'
                                    }
                                },
                                {   // 原材料层
                                    r0: '50%',
                                    r: '85%',
                                    itemStyle: {
                                        borderWidth: 1,
                                        borderColor: '#fff'
                                    },
                                    label: {
                                        fontSize: 12,
                                        color: '#666',
                                        position: 'outside',
                                        padding: 3,
                                        fontSize: 11,
                                        color: '#555'
                                    }
                                }
                            ],
                            itemStyle: {
                                borderWidth: 1,
                                borderColor: '#fff'
                            },
                            label: {
                                show: true
                            }
                        }]
                    });

                    // 运输距离图表
                    charts.distanceChart.setOption({
                        color: colors,
                        title: {
                            text: '运输距离统计',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            },
                            formatter: function(params) {
                                const route = params[0].name;
                                const distance = params[0].value;
                                const tripCount = data.transportData.tripCounts[params[0].dataIndex];
                                const temps = data.transportData.temperatures[params[0].dataIndex];
                                return `路线: ${route}<br/>
                                       平均距离: ${distance.toFixed(1)}km<br/>
                                       运输次数: ${tripCount}次<br/>
                                       温度范围: ${temps.min}°C ~ ${temps.max}°C`;
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '15%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: data.transportData.routes,
                            axisLabel: {
                                rotate: 45
                            }
                        },
                        yAxis: {
                            type: 'value',
                            name: '距离 (km)'
                        },
                        series: [{
                            name: '运输距离',
                            type: 'bar',
                            data: data.transportData.distances,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#83bff6' },
                                    { offset: 0.5, color: '#188df0' },
                                    { offset: 1, color: '#188df0' }
                                ]),
                                borderRadius: [5, 5, 0, 0]
                            }
                        }]
                    });

                    // 验证记录图表
                    charts.verificationChart.setOption({
                        title: {
                            text: '产品验证记录统计',
                            left: 'center',
                            textStyle: {
                                fontSize: 16
                            }
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '15%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: data.verificationStats.products,
                            axisLabel: {
                                rotate: 45
                            }
                        },
                        yAxis: {
                            type: 'value',
                            name: '验证次数'
                        },
                        series: [{
                            name: '验证次数',
                            type: 'bar',
                            data: data.verificationStats.counts,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#83bff6' },
                                    { offset: 0.5, color: '#188df0' },
                                    { offset: 1, color: '#188df0' }
                                ])
                            },
                            barWidth: '40%',
                            label: {
                                show: true,
                                position: 'top'
                            }
                        }]
                    });

                    // 合约状态图表
                    charts.contractChart.setOption({
                        title: {
                            text: '合约状态分布',
                            left: 'center',
                            textStyle: {
                                fontSize: 16
                            }
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            orient: 'horizontal',
                            bottom: 'bottom'
                        },
                        series: [{
                            name: '合约状态',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: true,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: true,
                                formatter: '{b}: {c}个'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 16,
                                    fontWeight: 'bold'
                                }
                            },
                            data: data.contractStats.map(item => ({
                                name: item.status || '未设置',
                                value: item.count
                            }))
                        }]
                    });
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                });
        }

        // 页面加载完成后更新图表
        window.onload = updateCharts;

        // 监听窗口大小变化，调整图表大小
        window.onresize = function() {
            Object.values(charts).forEach(chart => chart.resize());
        };
    </script>
</body>
</html> 